<template>
    <div class="user">
        <el-card class="user_body">
            <el-row>
                <!-- 左边 -->
                <el-col :span="6" class="user_body_left">
                    <!-- 一行内容 -->
                    <div
                        :class="[
                            'list-row',
                            selectDid === dept.id ? 'list-row-active' : '',
                        ]"
                        v-for="dept in deptList"
                        :key="dept.id"
                        @click="handleDeptSelect(dept.id)"
                    >
                        <div>
                            <span class="list-row-logo">{{
                                dept.name.substr(0, 2)
                            }}</span>
                            <span class="list-row-title">{{ dept.name }}</span>
                        </div>

                        <el-dropdown placement="bottom-start">
                            <i
                                class="iconfont icongengduo"
                                style="color: black !important;"
                            ></i>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item
                                    ><i class="el-icon-edit"></i
                                    >修改部门信息</el-dropdown-item
                                >
                                <el-dropdown-item>
                                    <i class="el-icon-delete"></i
                                    >删除</el-dropdown-item
                                >
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>

                    <!-- 新建部门 -->
                    <div class="add-dept" @click="addDeptDialogVisible = true">
                        <i class="iconfont iconicon-test"></i>
                        <span>新建部门</span>
                    </div>
                </el-col>

                <!-- 右边 -->
                <el-col :span="18" class="user_body_right">
                    <div class="user_body_right_header">
                        <div>
                            <el-dropdown
                                size="small"
                                split-button
                                type="primary"
                            >
                                账号状态：全部
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>未激活</el-dropdown-item>
                                    <el-dropdown-item>启用</el-dropdown-item>
                                    <el-dropdown-item>已删除</el-dropdown-item>
                                    <el-dropdown-item>全部</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>

                            <el-button
                                size="mini"
                                icon="iconfont icongengduo-2"
                            ></el-button>
                        </div>

                        <div>
                            <el-button
                                icon="iconfont icontianjia"
                                size="mini"
                                @click="addUserDialogVisible = true"
                                >添加成员</el-button
                            >

                            <el-button size="small">批量导入/修改</el-button>
                        </div>
                    </div>

                    <!-- 用户表格 -->
                    <el-table :data="userList">
                        <el-table-column type="selection"></el-table-column>
                        <el-table-column
                            label="姓名"
                            prop="nickname"
                        ></el-table-column>

                        <el-table-column
                            label="手机号"
                            prop="mobile"
                        ></el-table-column>

                        <el-table-column label="电子邮箱">
                            <template slot-scope="scope">
                                {{ scope.row.email || "暂未填写" }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-card>

        <!-- 新建部门弹框 -->
        <el-dialog
            title="添加部门"
            :visible.sync="addDeptDialogVisible"
            width="40%"
        >
            <el-form>
                <el-form-item label="部门名称">
                    <el-input v-model="deptName"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer">
                <el-button @click="addDeptDialogVisible = false"
                    >取 消</el-button
                >
                <el-button type="primary" @click="addDept">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 新建用户弹框 -->
        <el-dialog
            title="添加成员"
            :visible.sync="addUserDialogVisible"
            width="60%"
        >
            <el-form
                :model="addUserForm"
                ref="addUserFormRef"
                :rules="addUserFormRules"
                label-position="top"
                status-icon
            >
                <el-row :gutter="20">
                    <el-col :span="12">
                        <!-- 姓名 -->
                        <el-form-item label="姓名" prop="nickname">
                            <el-input v-model="addUserForm.nickname"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <!-- 部门 -->
                        <el-form-item label="部门" prop="did">
                            <el-select
                                v-model="addUserForm.did"
                                placeholder="请选择部门"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="dept in deptList"
                                    :key="dept.id"
                                    :value="dept.id"
                                    :label="dept.name"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <!-- 姓名 -->
                        <el-form-item label="手机号" prop="mobile">
                            <el-input
                                v-model="addUserForm.mobile"
                                placeholder="请输入手机号"
                            >
                                <template slot="prepend">
                                    +86
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <!-- 部门 -->
                        <el-form-item label="邮箱" prop="email">
                            <el-input
                                v-model="addUserForm.email"
                                placeholder="请输入邮箱"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <span slot="footer">
                <el-row type="flex" justify="space-between" align="middle">
                    <el-checkbox
                        >通过短信或者邮箱发送邀请
                        <i class="el-icon-question"></i
                    ></el-checkbox>

                    <div>
                        <el-button @click="addUserDialogVisible = false"
                            >取 消</el-button
                        >
                        <el-button type="primary" @click="addUser"
                            >完 成</el-button
                        >
                        <el-button type="primary" @click="addUserWithContinue"
                            >完成并继续添加</el-button
                        >
                    </div>
                </el-row>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            deptList: [],
            userList: [],
            selectDid: 0,
            addDeptDialogVisible: false,
            deptName: "",
            addUserDialogVisible: false,
            addUserForm: {
                nickname: "",
                did: "",
                mobile: "",
                email: "",
            },
            addUserFormRules: {
                nickname: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "change",
                    },
                ],
                did: [
                    {
                        required: true,
                        message: "请选择部门",
                        trigger: "change",
                    },
                ],
                mobile: [
                    {
                        required: true,
                        message: "请输入手机号码",
                        trigger: "change",
                    },
                    {
                        validator: (rule, val, callback) => {
                            if (val && !/^1[3578]\d{9}$/.test(val)) {
                                return callback(
                                    new Error("请输入正确的手机号码")
                                );
                            }
                            callback();
                        },
                    },
                ],
                email: [
                    {
                        validator: function(rule, val, callback) {
                            if (val && !/\w+@\w+\.com/.test(val)) {
                                return callback(
                                    new Error("请输入正确格式的邮箱")
                                );
                            }
                            callback();
                        },
                        message: "邮箱格式不正确",
                        triggr: "change",
                    },
                ],
            },
            selectMobilePrefix: "1",
        };
    },
    async created() {
        await this.getDeptList();
        this.handleDeptSelect(this.deptList[0].id);
    },
    methods: {
        async getDeptList() {
            const res = await this.$http.get("/depts");
            this.deptList = res.data;
        },
        handleDeptSelect(did) {
            this.selectDid = did;
            this.getUserList(did);
        },
        async getUserList(did) {
            const res = await this.$http.get(`/users?did=${did}`);
            this.userList = res.data;
        },
        async addDept() {
            if (!this.deptName) {
                this.$message.error("部门名称不能为空");
                return;
            }
            const res = await this.$http.post("/depts", {
                name: this.deptName,
            });
            if (res.code !== 201) {
                this.$notify.error(res.message);
                return;
            }
            this.getDeptList();
            // 关闭 Dialog
            this.addDeptDialogVisible = false;
        },
        async addUser() {
            this.addUserWithContinue(() => {
                this.addUserDialogVisible = false;
            });
        },
        addUserWithContinue(callback) {
            this.$refs.addUserFormRef.validate(async (isOk) => {
                if (!isOk) return;
                const res = await this.$http.post("/users", this.addUserForm);
                if (res.code !== 201) {
                    this.$notify.error(res.message);
                    return;
                }
                // 添加成功提示
                this.$notify.success("添加成功");
                // 如果添加的是当前部门，刷新当前部门用户列表
                if (this.addUserForm.did === this.selectDid) {
                    this.getUserList();
                }
                // 重置表单
                this.$refs.addUserFormRef.resetFields();
                // 调用成功后执行的操作
                typeof callback === "function" && callback();
            });
        },
    },
};
</script>

<style lang="less">
.user {
    height: 100%;
    &_body {
        height: 100%;
        .el-row,
        .el-col {
            height: 100%;
        }

        &_left {
            height: 100%;
            border-right: 2px solid #dcdfe6;
            padding-right: 15px;

            .list-row {
                padding: 8px 15px;
                margin-bottom: 10px;
                border-radius: 5px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                &-logo {
                    display: inline-block;
                    background-color: #409eff;
                    width: 36px;
                    border-radius: 2px;
                    color: #f2f6fc;
                    font-size: 14px;
                    line-height: 24px;
                    text-align: center;
                    margin-right: 15px;
                }

                &-title {
                    font-size: 14px;
                    color: #409eff;
                }
            }

            .list-row-active {
                background-color: #ddebfd;
                color: #409eff;
            }

            .add-dept {
                font-size: 14px;
                color: #409eff;
                text-align: center;
                margin-top: 20px;
                font-weight: 900;
                line-height: 24px;
                cursor: pointer;

                .iconfont {
                    margin-right: 5px;
                }
            }
        }

        &_right {
            padding-left: 15px;

            &_header {
                display: flex;
                justify-content: space-between;

                div {
                    display: flex;
                    align-items: center;
                }

                .el-dropdown {
                    margin-right: 5px;
                }

                .icontianjia {
                    font-size: 12px;
                    font-weight: 900;
                    margin-right: 3px;
                }
            }

            .el-table {
                margin-top: 15px;
            }
        }
    }
}
</style>
